import React from 'react';
import { Chart, Tooltip, Axis, Geom } from 'bizcharts';

type PropField = {
  datas: Record<string, any>[];
  xCol: string;
  yCol: string;
  height: number;
};
const MiniAreaChart: React.FC<PropField> = (props) => {
  const { datas, xCol, yCol, height } = props;
  let minVal = 6000000;
  for (let i = 0; i < datas.length; i++) {
    if (datas[i][yCol] && datas[i][yCol] < minVal) {
      minVal = datas[i][yCol];
    }
  }
  const position = `${xCol}*${yCol}`;
  const scale = {
    [yCol]: {
      min: minVal,
      tickCount: 4,
      alias: '时点',
      type: 'linear-strict',
    },
  };
  const color = 'rgba(24, 144, 255, 0.2)';
  const borderColor = '#1089ff';
  const borderWidth = 2;
  return (
    <Chart scale={scale} autoFit height={height} data={datas} forceFit={true} animate={true}>
      <Axis key="axis-x" name={xCol} label={false} line={false} tickLine={false} grid={false} />
      <Axis key="axis-y" name={yCol} label={false} line={false} tickLine={false} grid={false} />
      <Tooltip showTitle={true} />
      <Geom
        type="area"
        position={position}
        color={color}
        shape="smooth"
        style={{
          fillOpacity: 1,
        }}
      />
      <Geom
        type="line"
        position={position}
        shape="smooth"
        color={borderColor}
        size={borderWidth}
        tooltip={false}
      />
    </Chart>
  );
};

export default MiniAreaChart;
